<template>
    <div>
        <h2>个人信息表</h2>
        <el-radio-group  size="medium">
            <div style="margin: 20px;"></div>
        <el-form label-position="left" label-width="10.417vw" :model="updatePer" >
            <el-form-item label="编号：" >
                <el-input v-model="updatePer.userId" disabled></el-input>
            </el-form-item>
            <el-form-item label="电话：">
                <el-input v-model="updatePer.userTel"></el-input>
            </el-form-item>
            <el-form-item label="昵称：">
                <el-input v-model="updatePer.userName"></el-input>
            </el-form-item>
            <el-form-item label="性别：">
                <el-input v-model="updatePer.userSex"></el-input>
            </el-form-item>
            <el-form-item label="实验靶场积分：">
                <el-input v-model="updatePer.userJifen1"></el-input>
            </el-form-item>
            <el-form-item label="CTF积分：">
                <el-input v-model="updatePer.userJifen2"></el-input>
            </el-form-item>
            <el-form-item label="状态：">
                <el-input v-model="updatePer.userStatus" disabled></el-input>
            </el-form-item>
            <el-form-item label="资产：">
                <el-input v-model="updatePer.userProperty" disabled></el-input>
            </el-form-item>
            <el-form-item label="头像">
          <el-upload
            style="float: left;"
            class="avatar-uploader"
            action="http://172.16.13.212:8090/uploadoss"
            :show-file-list="false"
            :on-success="handlesAvatarSuccess"
            :before-upload="beforeAvatarsUpload">
            <img v-if="userSrc" :src="updatePer.userSrc" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload>
        </el-form-item>
        </el-form>
     </el-radio-group>
     <div class="btn" >
        <el-button @click="addPer = false">取消</el-button>
        <el-button type="primary" @click="addPerApi">确定</el-button>
     </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const {  mapMutations } = createNamespacedHelpers("tags");
export default {
    data(){
        return{
            updatePer:{
                userTel:'',
                userName:'',
                userSex:'',
                userJifen1:'',
                userJifen2:'',
                userSrc:''
            }
        }
    },
    methods:{
      ...mapMutations(["addTabs"]),
        handlesAvatarSuccess(args){
      console.log('args',args);
        this.userSrc = `http://172.16.13.212:8090${args.data[0]}`
          this.updatePer.userSrc = `http://172.16.13.212:8090${args.data[0]}`
     },
     beforeAvatarsUpload(file){
      const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
     },
     async addPerApi(){
      console.log('修改后的数据',this.updatePer);
      const result = await this.$api.users.updateUsers(this.updatePer)
      console.log('results',result);
      if(result.code){
        this.$message.success(result.message) 
    }
}
    },
    beforeRouteEnter(to,from,next){
        next(vm=>{
           vm.addTabs(to)
        })
 },
  }
</script>

<style scoped lang="scss">
.el-input{
    width: 31.25vw;
}
.el-form-item__label {
    width: 15.625vw;
}
.el-form-item{
    width: 41.667vw;
    font-size: 1.563vw;
    font-weight: 36.458vw;
}
.ava{
    margin-right: 26.042vw;
}
.avatar-uploader ::v-deep .el-upload {
    border: 0.052vw dashed #d9d9d9;
    border-radius: 0.313vw;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader ::v-deep .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 1.458vw;
    color: #8c939d;
    width: 9.271vw;
    height: 9.271vw;
    text-align: center;
    line-height: 9.271vw;
    border: 0.052vw solid #8c939d;
  }
  .avatar {
    width: 9.271vw;
    height: 9.271vw;
    display: block;
  }
  .btn{
    margin: 1.563vw;
  }
</style>